<template>
  <div class="ai-switch-modal" v-if="modelValue">
    <div class="modal-mask" @click="closeModal"></div>
    <div class="modal-content">
      <div class="modal-title">选择AI模型</div>
      <div class="model-list">
        <div class="model-item" :class="{ active: currentModel === 'gpt' }" @click="selectModel('gpt')">
          <image class="model-icon" src="/static/images/gpt.png" mode="aspectFit" />
          <text class="model-name">ChatGPT</text>
        </div>
        <div class="model-item" :class="{ active: currentModel === 'claude' }" @click="selectModel('claude')">
          <image class="model-icon" src="/static/images/claude.png" mode="aspectFit" />
          <text class="model-name">Claude</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const currentModel = ref('gpt')

const selectModel = (model) => {
  currentModel.value = model
  emit('update:modelValue', false)
}

const closeModal = () => {
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.ai-switch-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;

  .modal-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }

  .modal-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
  }

  .modal-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 30rpx;
  }

  .model-list {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
  }

  .model-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 40rpx;
    border-radius: 12rpx;
    background: var(--a-main-box-bg-color);

    &.active {
      background: var(--a-main-color);

      .model-name {
        color: #fff;
      }
    }
  }

  .model-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
  }

  .model-name {
    font-size: 28rpx;
    color: var(--a-one-text-color);
  }
}
</style>